<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>性别与年龄占比嵌套饼图</title>
    <script src="./echarts.min.js"></script>
    <style>
        #chart-container {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('chart-container'));
        
        // 准备数据 - 使用层次结构
        var data = {
            name: '总人口',
            children: [
                {
                    name: '男',
                    value: 65,
                    children: [
                        {name: '0-18岁', value: 15},
                        {name: '19-30岁', value: 20},
                        {name: '31-45岁', value: 18},
                        {name: '46岁以上', value: 12}
                    ]
                },
                {
                    name: '女',
                    value: 35,
                    children: [
                        {name: '0-18岁', value: 8},
                        {name: '19-30岁', value: 12},
                        {name: '31-45岁', value: 10},
                        {name: '46岁以上', value: 5}
                    ]
                }
            ]
        };
        
        // 配置项
        var option = {
            title: {
                text: '性别与年龄分布(嵌套饼图)',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function(info) {
                    var value = info.value;
                    var treePathInfo = info.treePathInfo;
                    var treePath = [];
                    
                    for (var i = 1; i < treePathInfo.length; i++) {
                        treePath.push(treePathInfo[i].name);
                    }
                    
                    return [
                        '<div style="font-size:16px;color:#666;font-weight:600;margin-bottom:5px;">' + 
                        treePath.join(' - ') + '</div>',
                        '占比: ' + value + '%',
                        '相对比例: ' + info.percent + '%'
                    ].join('<br>');
                }
            },
            series: {
                name: '人口分布',
                type: 'sunburst',
                data: data.children,
                radius: [0, '90%'],
                label: {
                    rotate: 'radial',
                    fontSize: 12
                },
                levels: [
                    {}, // 第一层设置(性别层)
                    { // 第二层设置(年龄层)
                        r0: '30%',
                        r: '80%',
                        itemStyle: {
                            borderWidth: 2
                        },
                        label: {
                            rotate: 'tangential'
                        }
                    },
                    { // 如果有更多层可以继续添加
                        r0: '80%',
                        r: '90%'
                    }
                ]
            }
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>